<template>
  <div>
    <el-switch
      v-model="status"
      active-color="#409EFF"
      inactive-color="#F56C6C"
      @change="changeShowStatus(row, dictData, status)"
    />
  </div>
</template>

<script>
import CRUD, { crud } from '@crud/crud'

export default {
  name: 'MallSwitch',
  mixins: [crud()],
  props: {
    row: {
      default: () => ({}),
      type: Object
    }, // 本行数据
    rowData: {
      default: false,
      type: Boolean
    }, // 需要字段的值
    dictData: {
      default: () => ({}),
      type: Object,
      required: true
    }, // 所需字典的属性
    rowFiled: {
      default: '',
      type: String
    }, // 所需字段名
    toTrueCharacter: {
      default: '',
      type: String
    }, // 变成true显示的字符,使用就会优先使用传入的字符
    toFalseCharacter: {
      default: '',
      type: String
    }, // 变成false时显示的字符
    title: {
      default: '', // 该条数据的名称字段
      type: String
    },
    activeColor: {
      default: '#409EFF', // 激活时颜色
      type: String
    },
    inactiveColor: {
      default: '#F56C6C', // 灭活时颜色
      type: String
    }
  },
  data() {
    return {
      status: this.row[this.rowFiled]
    }
  },

  watch: {
    status(newValue) {
      this.row[this.rowFiled] = newValue
    }
  },
  methods: {
    changeShowStatus(row, dictData, rowData) {
      const msg = rowData ? this.toTrueCharacter : this.toFalseCharacter
      this.$confirm('此操作将 "' + (msg || dictData[rowData]) + '" ' + this.title + ', 是否繼續？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.crud.crudMethod.edit(row).then(res => {
          this.crud.notify((msg || dictData[rowData]) + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
          this.crud.refresh()
        }).catch(() => {
          this.status = !this.status
          this.crud.refresh()
        })
      }).catch(() => {
        this.status = !this.status
        this.crud.refresh()
      })
    }
  }
}
</script>

<style scoped>

</style>
